<template>
	<view class="content">
	<!-- 下拉选择头部 -->
		<view class="header">
			<view class="" @click="handleShow">{{currentText}}</view>
			<!-- 弹层 -->
			<view class="filterWrap" v-if="visible">
				<!-- 一级渲染 -->
				<view class="filterLeft">
					<view class="leftItem" v-for="(item,index) in options" :key="index" @click="handleFirst(index)">
						<text :style="{color: currentIndex === index ? '#f55500' : ''}">{{item.name}}</text>
					</view>
				</view>
				<!-- 二级渲染 -->
				<view class="filterRight">
					<view v-for="(item,index) in options[currentIndex].children" :key="item.value" @click="handleSelect(item.value)">
						<text :style="{color: filterValue === item.value ? '#f55500' : ''}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="tags">
			<view @click="handleSelectType(item.value)" class="tag" v-for="item in filterOptions" :style="{color: filterType === item.value ? '#f55500' : ''}">{{item.text}}</view>
		</view>
		<!-- 条数 -->
		<text>共{{total}}条</text>
		<!-- 列表展示 -->
		<view class="">
			<view v-for="(item,index) in list" class="itemWrap" :key="item.id">
				<image class="itemimage" :src="item.image" mode=""></image>
				<view class="">
					<view class="">{{item.title}}</view>
					<view class="">{{item.time}}</view>
					<view class="">热度：{{item.hot}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下方列表展示
				list: [],
				// 总数量展示
				total: 0,
				// 当前选择的一级index
				currentIndex: 0,
				// 弹层是否展示
				visible: false,
				// 全部/最新/最热，所选的值
				filterType: 0,
				// 二级数据选择的值
				filterValue: null,
				// 请求页码
				page: 1,
				filterOptions: [{
					text: '全部',
					value: 0
				},{
					text: '最新',
					value: 1
				},{
					text: '最热',
					value: 2
				}],
				options: [
					{
						name: '后端',
						children: [
							{
								name: 'java',
								value: 1
							},
							{
								name: 'matlab',
								value: 2
							}
						]
					},{
						name: '前端',
						children: [
							{
								name: 'h5',
								value: 3
							},
							{
								name: '小程序',
								value: 4
							},{
								name: 'react',
								value: 5
							}
						]
					}
				],
			}
		},
		onLoad() {
			// 初始化请求
			this.fetchList()
		},
		onReachBottom() {
			// 触底page加1
			this.page += 1;
			this.fetchList()
		},
		computed: {
			currentText() {
				// 通过监听filterValue值，
				// 使用递归将需要展示文本内容进行展示
				if(!this.filterValue) return '选择课程'
				let result = '选择课程'
				function myLoop (data, value) {
					let str = '';
					data.forEach(item => {
						if(item.value === value) {
							str = item.name
						} else if(item.children?.length) {
							console.log(myLoop(item.children, value),'res')
							if(myLoop(item.children, value)) {
								str = myLoop(item.children, value)
							}

						}
					})
					return str
				}
				return myLoop(this.options, this.filterValue) || result
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 需要重置条件
			// this.filterType = 0;
			// this.filterValue = null;
			// this.currentIndex = 0;
			this.fetchList()
		},
		methods: {
			handleSelectType(value) {
				this.filterType = value;
				this.page = 1;
				this.fetchList()
			},
			handleShow() {
				this.visible = true;
			},
			handleFirst(index) {
				this.currentIndex = index;
			},
			handleSelect(value) {
				this.filterValue = value;
				this.visible = false;
				this.page = 1;
				// 请求
				this.fetchList()
			},
			fetchList() {
				// 请求前展示loading
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.request({
					url: 'http://localhost:3000/api/list',
					data: {
						page: this.page,
						pageSize: 6,
						type: this.filterValue || '',
						sort: this.filterType
					}
				}).then(res => {
					this.total = res.data.total;
					this.list = this.page === 1 ? res.data.data : this.list.concat(res.data.data)
					// 请求后隐藏loading
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
.header {
	height: 100rpx;
	background: #fff;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: relative;
	.filterWrap {
		position: absolute;
		top: 100rpx;
		height: auto;
		left: 0;
		width: 750rpx;
		background: #fff;
		display: flex;
		.filterLeft {
			width: 200rpx;
			border-left: 1px solid #fefefe;
			.leftItem {
				height: 150rpx;
				line-height: 150rpx;
			}
		}
	}
}
.tags {
	display: flex;
	.tag {
		padding: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
}
.itemWrap {
	display: flex;
	height: 300rpx;
	margin: 20rpx 0;
	.itemimage {
		width: 300rpx;
		height: 300rpx;
	}
}
</style>
